<form id="component-form-step-1" class="layui-form" action="" lay-filter="component-form-step-1">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input" v-model="name">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">角色简介</label>
            <div class="layui-input-inline">
                <input type="text" name="remark" required  lay-verify="required" placeholder="请输入角色简介" autocomplete="off" class="layui-input" v-model="remark">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">是否开启</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" lay-skin="switch" lay-filter="status" value="1">
            </div>
        </div>
    </div>
</form>

<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use(['upload','form'], function(){
        var upload = layui.upload;
        var $ = layui.jquery;
        var form = layui.form;
        // var add_step1 = {};

        // 初始化一个VUE对象
        var add_step1 = new Vue({
            'el' : '#component-form-step-1',
            'data' : {
                name : '',
                remark : '',
                status : ''
            },
            methods : {

            },
            watch : {
                status : function (newVal,oldVal) {
                    var self = this;
                    form.val("component-form-step-1", {
                        status : newVal==1
                    });
                }
            }
        });

        (function (add_step1) {
            // 更新 lay-filter="test1" 所在容器内的全部表单状态
            form.render(null,'component-form-step-1');

            // 是否启用
            form.on('switch(status)', function(ret){
                // console.log(ret);
                // layer.tips('开关checked：'+ (this.checked ? 'true' : 'false'), ret.othis)
                add_step1.status = this.checked ? '1' : '0';
            });
            add_step1.status = '1';
        })(add_step1);

        if(commParam['info'] !== null){
            // 编辑入参
            var param = commParam['info'];
            add_step1.name = param['name'];
            add_step1.remark = param['remark'];
            add_step1.status = param['status'];
        }

        // 暴漏给外部
        window.add_step1 = add_step1;
    });
</script>